/*
# 自定义封装流布局 v2.0.2

# 流布局方向
    flex流布局存在两个方向；简称：流方向=方向1 ; 与相对方向=方向2

# 说明：横向、纵向、方向1、方向2
    举例：如果当前为横向流布局，那么相对方向就是 纵向
         如果当前为纵向流布局，那么相对方向就是 横向
    两个方向：流方向=方向1；相反方向=方向2；
    方向1：用 “justify-content” 控制
    方向2：用 “alien-item” 控制

# 命名规则 【fx方向1方向2】
# !important;为了提升优先级


【justify-content】【控制方向1】【调整当前流的方向】
    【当前为水平流row时，方向1=从左到右】【当前为垂直流column时，方向1=从上到下】
    【flex-start】
        含义：flex项目向容器的起始位置对齐排列。在水平方向（主轴为水平时），所有项目都靠左对齐；在垂直方向（主轴为垂直时），所有项目都靠顶部对齐。
        场景：假设有一个导航栏，使用flex布局来排列导航项。如果希望导航项从左边开始依次排列，就可以使用flex-start。
    【flex-end】
        含义：flex项目向容器的结束位置对齐排列。在水平方向（主轴为水平时），所有项目都靠右对齐；在垂直方向（主轴为垂直时），所有项目都靠底部对齐。
        场景：比如在一个页面底部的版权信息区域，有多个版权相关的元素（如版权声明、年份、公司名称等），如果想让这些元素靠右对齐，可以使用flex - end。
    【center】
        含义：flex项目在容器的中心位置对齐排列。在水平方向（主轴为水平时），所有项目在水平中心对齐；在垂直方向（主轴为垂直时），所有项目在垂直中心对齐。
        场景：制作一个模态框，其中的内容（如标题、关闭按钮等）需要在模态框的水平中心位置显示，就可以对模态框内容区域的flex布局使用center属性。
    【space-between】
        含义：第一个flex项目靠容器的起始位置，最后一个flex项目靠容器的结束位置，其余项目均匀分布在它们之间，相邻项目之间的间距相等。
        场景：在一个产品展示区，有多个产品卡片，想让卡片在一行内均匀分布，且第一个卡片靠左，最后一个卡片靠右，就可以使用space - between。
    【space-around】
        含义：左右两侧都有相同大小的空白空间，相邻项目之间的空白是项目两侧空白的两倍。这使得项目看起来像是被等距地 “包围” 在空白空间中。
        场景：如果有一组图标，希望它们之间有一定的间隔，并且每个图标周围都有一些空白空间，space - around是一个不错的选择。
    【space-evenly】
        含义：所有flex项目（包括第一个项目之前和最后一个项目之后）之间的空白空间是完全相等的。这样所有项目在容器内均匀分布，空白空间分布更加对称。
        场景：在一个表单中，有多个输入框和按钮，想要它们均匀分布在一行，并且空白间隔完全相同，可以使用space - evenly。

【align-items】【控制方向2】【调整垂直于当前流的方向】
    【当前为水平流row时，方向2=从上到下】【当前为垂直流column时，方向2=从左到右】
    【start】
        含义：在主轴为水平方向时，flex项目靠顶部对齐；在主轴为垂直方向时，flex项目靠左侧对齐。
        场景：在一个侧边栏布局中，主轴是垂直方向，侧边栏中的菜单项（作为flex项目）可以使用flex - start来让它们在水平方向靠左侧对齐。
    【end】
        含义：在主轴为水平方向时，flex项目靠底部对齐；在主轴为垂直方向时，flex项目靠右侧对齐。
        场景：假设在一个页脚区域，有几个社交媒体图标（作为flex项目），主轴是水平方向，想要这些图标在垂直方向靠底部对齐，就可以使用flex - end。
    【center】
        含义：在主轴为水平方向时，flex项目在垂直方向的中心对齐；在主轴为垂直方向时，flex项目在水平方向的中心对齐。
        场景：比如在一个圆形的导航按钮组（主轴为水平方向）中，希望每个按钮在垂直方向上的中心对齐，就可以使用center。
    【baseline】
        含义：按照它们的基线（文本的基线）对齐。基线是字符底部所在的假想线，基线的位置可能不同。使得文本看起来像是在同一水平线上（在主轴为水平方向时）。
        场景：当有一组包含不同字体大小或者行高的文本标签作为flex项目，并且希望它们的文本基线对齐时，就可以使用baseline。例如在一个表单中，标签和输入框的组合，希望标签的文本基线对齐。
    【stretch】
        含义：如果flex项目没有设置高度（或者高度为auto），它们将沿着交叉轴（垂直于主轴的轴）被拉伸，以填充容器的高度（在主轴为水平方向时）或者宽度（在主轴为垂直方向时）。
        场景：假设有一个flex容器，主轴是水平方向。容器内有几个子元素，这些子元素没有设置明确的高度。当align - items设置为stretch时，这些子元素会自动拉伸其高度，以填满容器在垂直方向的空间。
*/

/**
# 全部class说明,请先理解 横向流 和 纵向流 、 方向1 和 方向2 ，要不然用起来会很疑惑
  【fx】 开启流布局，默认横向布局
  【fx1】在流布局中，占据剩余全部空间
  【fx-row】开启横向流布局
  【fx-col】开启纵向流布局
  【fx-wrap】开启自动换行
  【fx-np-wrap】禁止自动换行
  【fx-sta】横向流：左 ；纵向流：上
  【fx-sta-sta】横向流：左、上 ；纵向流：上、左
  【fx-sta-cen】横向流：左、居中 ；纵向流：上、居中
  【fx-end】横向流：右 ；纵向流：下
  【fx-end-end】横向流：右、下 ；纵向流：下、右
  【fx-end-cen】横向流：右、居中 ；纵向流：居中、右
  【fx-cen】横向流：居中 ；纵向流：居中
  【fx-cen-sta】横向流：居中、左 ；纵向流：居中、上
  【fx-cen-end】横向流：居中、右 ；纵向流：居中、下
  【fx-cen-cen】横向流：居中、居中 ；纵向流：居中、居中横向流：居中、居中 ；纵向流：居中、居中
  【fx-bet】横向流：贴两端 ；纵向流：贴两端
  【fx-bet-sta】横向流：贴两端+剩余均分、上 ；纵向流：贴两端+剩余均分、左
  【fx-bet-end】横向流：贴两端+剩余均分、下 ；纵向流：贴两端+剩余均分、右
  【fx-bet-cen】横向流：贴两端+剩余均分、居中 ；纵向流：贴两端+剩余均分、居中
 */
.fx {
    display: flex !important;
}

.fx1 {
    flex: 1 1 0 !important;
}

.fx-row {
    display: flex !important;
    flex-direction: row !important;
}

.fx-col {
    display: flex !important;
    flex-direction: column !important;
}

/*内容展示不下时，不会自动收缩*/
.fx-shr0 {
    flex-shrink: 0;
}

.fx-col-cen {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.fx-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
}

.fx-nowrap {
    display: flex !important;
    flex-wrap: nowrap !important;
}

.fx-sta {
    display: flex !important;
    justify-content: flex-start !important;
}

.fx-sta-sta {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

.fx-sta-cen {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
}

.fx-sta-end {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: flex-end !important;
}

.fx-end {
    display: flex !important;
    justify-content: flex-end !important;
}

.fx-end-cen {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

.fx-end-end {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: flex-end !important;
}

.fx-cen {
    display: flex !important;
    justify-content: center !important;
}

.fx-cen-sta {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
}

.fx-cen-end {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
}

.fx-cen-cen {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/*这个属性值会使第一个子元素靠最左边，最后一个子元素靠最右边，中间的子元素均匀分布在它们之间*/
.fx-bet {
    display: flex !important;
    justify-content: space-between !important;
}

.fx-bet-sta {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
}

.fx-bet-end {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
}

.fx-bet-cen {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}


/*每个子元素的左右两侧都有相同大小的空白空间，并且相邻元素之间的空白是元素两侧空白的两倍*/
.fx-aro {
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
}

.fx-aro-sta {
    display: flex !important;
    justify-content: space-around !important;
    align-items: flex-start !important;
}

.fx-aro-end {
    display: flex !important;
    justify-content: space-around !important;
    align-items: flex-end !important;
}

.fx-aro-cen {
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
}

/*所有子元素（包括第一个元素之前和最后一个元素之后）之间的空白空间是完全相等的*/
.fx-eve {
    display: flex;
    justify-content: space-evenly !important;
    align-items: stretch !important;
}

.fx-eve-sta {
    display: flex;
    justify-content: space-evenly !important;
    align-items: flex-start !important;
}

.fx-eve-end {
    display: flex;
    justify-content: space-evenly !important;
    align-items: flex-end !important;
}

.fx-eve-cen {
    display: flex;
    justify-content: space-evenly !important;
    align-items: center !important;
}

/*内容拉伸铺满*/
.fx-sth-sth {
    display: flex !important;
    justify-content: stretch !important;
    align-items: stretch !important;
}
